import type { WebNavTableListItem } from '../typings.d';
import styles from './styles.less';

const WebNavCard = (props: { webNav: WebNavTableListItem }) => {
  const { webNav } = props;
  const isPrivate = webNav.status == 1;

  const hrefcontent = () => {
    window.open(webNav.url);
  }
  return (
    <div className={styles.webnavCard} onClick={hrefcontent}>
      <div className={styles.header}>
        <h3 className={styles.platName}>{webNav.platformName}</h3>
        <a target="_blank" className={styles.platUrl} rel="noreferrer">
          {webNav.url}
        </a>
      </div>
      <div className={styles.main}>
        <img src={webNav.bannerUrl} alt="banner" />
      </div>
      <div className={styles.footer}>{webNav.description}</div>
      <i
        className={styles.status}
        style={{
          backgroundColor: isPrivate ? '#ed5b56' : '#4091f7',
        }}
      >
        {isPrivate ? '私有' : '公共'}
      </i>
    </div>
  );
};

export default WebNavCard;
